<template>
  <div class="system-resource bg-white rounded-lg shadow-md p-6">
    <!-- 标题栏 -->
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800">系统资源使用情况</h3>
      <div class="text-sm text-gray-500">实时监控</div>
    </div>

    <!-- 第一行：CPU + 内存 -->
    <div class="flex flex-col md:flex-row gap-6 mb-8">
      <!-- CPU 模块 -->
      <div class="flex-1 bg-white rounded-lg shadow p-6">
        <div class="text-center mb-4">
          <p class="text-sm text-gray-500">CPU 使用率</p>
          <p class="text-3xl font-bold text-blue-600">{{ cpuUsage }}%</p>
        </div>
        <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
          <div class="absolute top-0 left-0 h-full bg-blue-500"
               :style="{ width: cpuUsage + '%' }"></div>
        </div>
        <div class="space-y-2">
          <ResourceUsageItem name="物理引擎"
                             value="42%"
                             color="blue" />
          <ResourceUsageItem name="数据处理"
                             value="23%"
                             color="blue" />
        </div>
      </div>

      <!-- 内存 模块 -->
      <div class="flex-1 bg-white rounded-lg shadow p-6">
        <div class="text-center mb-4">
          <p class="text-sm text-gray-500">内存使用率</p>
          <p class="text-3xl font-bold text-purple-600">{{ memoryUsage }}%</p>
        </div>
        <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
          <div class="absolute top-0 left-0 h-full bg-purple-500"
               :style="{ width: memoryUsage + '%' }"></div>
        </div>
        <div class="space-y-2">
          <ResourceUsageItem name="缓存"
                             value="3.2 GB"
                             valuePercent="45%"
                             color="purple" />
          <ResourceUsageItem name="计算空间"
                             value="5.7 GB"
                             valuePercent="81%"
                             color="purple" />
        </div>
      </div>
    </div>

    <!-- 第二行：磁盘仪表盘（2个） -->
    <div class="bg-white rounded-lg shadow p-6">
      <div class="flex justify-between items-center mb-4">
        <h4 class="text-lg font-semibold text-gray-800">磁盘使用情况</h4>
      </div>
      <div class="flex flex-col md:flex-row gap-8">
        <!-- 磁盘 1 -->
        <div class="flex-1">
          <GaugeChart title="数据盘使用率"
                      :value="diskInfo[0].restPPT"
                      color="red"
                      unit="" />
        </div>
        <!-- 磁盘 2 -->
        <div class="flex-1">
          <GaugeChart title="存储盘使用率"
                      :value="diskInfo[1].restPPT"
                      color="blue"
                      unit="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ResourceUsageItem from './ResourceUsageItem.vue';
import GaugeChart from './gauge.vue'; // 假设仪表盘组件文件名为 GaugeChart.vue

// 接收父组件传入的 CPU/内存数据
defineProps({
  cpuUsage: { type: Number, required: true },
  memoryUsage: { type: Number, required: true },
});

// 模拟磁盘数据（实际从接口获取）
const diskInfo = ref([
  { device: '数据盘', restPPT: 70, unit: 'GB' }, // restPPT = 已用百分比（0-100）
  { device: '存储盘', restPPT: 30, unit: 'GB' },
]);
</script>

<style scoped>
.system-resource {
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式布局适配 */
@media (max-width: 768px) {
  .md\:flex-row {
    flex-direction: column;
  }
  .flex-1 {
    width: 100% !important;
  }
}

/* 资源项间距 */
.space-y-2 > div {
  margin-bottom: 8px;
}
</style>